<template>
	<div>
		<van-nav-bar title="详情" left-arrow @click-left="$router.back()" />
		<div>
			<img :src="item?.url" style="width: 100%;" />
			<h2>{{ item?.title }}</h2>
			<p>{{ item?.desc }}</p>
			<p style="color: red;">￥： {{ item?.price }}</p>
		</div>

		<van-action-bar>
			<van-action-bar-icon icon="chat-o" text="客服" dot />
			<van-action-bar-icon icon="cart-o" text="购物车" :badge="totalCount || ''" @click="$router.push({ name: 'car' })"/>
			<van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
			<van-action-bar-button type="warning" text="加入购物车" @click="addCar"/>
			<van-action-bar-button type="danger" text="立即购买" />
		</van-action-bar>
	</div>
</template>


<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { ListItemType } from '@/store'
import axios from 'axios'
import { useStore } from 'vuex';

const route = useRoute()
const store = useStore()
/*********************** 获取详情数据 *************************/ 
const id = route.params.id as string
const item = ref<ListItemType>()

onMounted(() => {
	// 发请求
	axios.post('/api/detail', { id }).then(resp => {
		// 保存数据
		item.value = resp.data.data
	})
})

/*********************** 购物车总数量*************************/ 
const totalCount = computed(() => store.getters.totalCount)

/*********************** 加入购物车 *************************/ 
const addCar = () => {
	store.commit('addCar', item.value)
}
</script>


